<template>
  <px-dialog v-model="isVisible" class="equip-dialog-wrap" title="选择借出工具" width="1200px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="5">
            <px-form-item label="工具名称/编码">
              <px-input
                v-model="queryParams.toolNameOrCode"
                placeholder="请输入工具名称/编码"
                maxlength="50"
                clearable
                @blur="queryParams.toolNameOrCode = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="工具分类">
              <px-select v-model="queryParams.toolCategory" placeholder="请选择工具分类" filterable clearable>
                <px-option v-for="item in toolCategoryList" :key="item.id" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="工具科室">
              <px-select v-model="queryParams.toolClassName" placeholder="请选择工具科室">
                <px-option v-for="item in classNameList" :key="item.id" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="资产标签">
              <px-select v-model="queryParams.assetTag" placeholder="请选择资产标签" filterable clearable>
                <px-option v-for="item in assetTagListAll" :key="item.value" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" max-height="340px" border @selection-change="selectionChange">
        <px-table-column type="selection" min-width="40" align="center" />
        <px-table-column prop="toolCode" label="工具编码" min-width="120" show-overflow-tooltip />
        <px-table-column prop="toolCategoryDesc" label="工具分类" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolName" label="工具名称" min-width="120" show-overflow-tooltip />
        <px-table-column prop="factoryAreaDesc" label="厂区" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolUnitDesc" label="工具单位" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolModel" label="型号/规格" min-width="120" show-overflow-tooltip />
        <px-table-column prop="brandVal" label="品牌" min-width="100" show-overflow-tooltip />
        <px-table-column prop="classNameDesc" label="工具科室" min-width="100" show-overflow-tooltip />
        <px-table-column prop="assetTagDesc" label="资产标签" min-width="100" show-overflow-tooltip />
        <px-table-column prop="custodianName" label="管理人" min-width="120" show-overflow-tooltip />
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="tool-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <div style="margin-top: 16px; text-align: right">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit">确认</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { queryDictData } from "@/api/common";
import { queryAllToolLedger } from "@/api/equip/toolManage";
import { computed, reactive, toRefs } from "vue";
import { assetTagList } from "../../data";

const assetTagListAll = [{ label: "全部", value: "" }, ...assetTagList];

// 调用父级-查询主页列表、关闭弹窗方法
const emits = defineEmits(["queryTable", "closeDialog"]);

// 父级传过来的值
const props = defineProps({
  // 控制弹窗显示隐藏
  visible: {
    type: Boolean,
    default: false
  },
  // 工具台账id
  toolId: {
    type: Number,
    default() {
      return undefined;
    }
  }
});

const isVisible = computed(() => props.visible);
const formRef = null;
const state = reactive<any>({
  queryParams: {
    toolNameOrCode: "",
    className: "",
    toolCategory: "",
    assetTag: "",
    toolStatus: 0,
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  selectedData: [],
  toolCategoryList: [],
  classNameList: []
});
const { queryParams, tableData, total, selectedData, toolCategoryList, classNameList } = toRefs(state);

// 工具科室下拉框
const queryClassNameSelect = async () => {
  const toolCategoryData = await queryDictData({ typeCode: "toolCategory" });
  classNameList.value = await queryDictData({ typeCode: "className" });
  toolCategoryList.value = [{ name: "全部", value: "", id: -1 }, ...toolCategoryData];
};

// 查询工具列表
const queryTable = async () => {
  const data = await queryAllToolLedger(queryParams.value);
  tableData.value = data?.data || [];
  total.value = data?.total || 0;
};
// 重置筛选条件和工具列表
const resetTable = async () => {
  queryParams.value = {
    toolNameOrCode: "",
    toolClassName: "",
    toolCategory: "",
    assetTag: "",
    toolStatus: 0,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 表格多选框选中
const selectionChange = (val: any) => {
  selectedData.value = val;
};
// 打开弹窗
const openDialog = () => {
  queryClassNameSelect();
  queryTable();
};
// 查询列表关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};

const handleSubmit = () => {
  emits("closeDialog", selectedData.value);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-dialog.scss");
</style>
